<template>
  <view class="component-container">
    <view class="bill-list">
      <view class="bill-item" v-for="item in list" :key="item.id">
        <hxk-card>
          <template v-slot:header>
            <view class="header">
              <view class="title">{{ billTypeMapping[item.billType] }}</view>
              <view class="status">
                <dict-tag :options="dict.type.pay_state" :value="item.payState"/>
              </view>
            </view>
          </template>
          <template v-slot:body>
            <view class="body">
              <view class="address">{{ item.premisesAddress || '' }}</view>
              <view class="deadline-date">最晚付款日期：{{ truncateDate(item.latestPayTime) }}</view>
              <view class="bill-amount">金额：¥{{ item.cost }}</view>
            </view>
          </template>
          <template v-slot:footer>
            <view class="footer">
              <view class="btn" @click="goto('/pages/manager/bill/detail?id=' + item.proprietorBillId)">详情</view>
              <view class="btn" @click="handlePay(item)">付款</view>
            </view>
          </template>
        </hxk-card>
      </view>
    </view>
  </view>
</template>

<script>
import HxkCard from "@/components/hxk-card/index";
import {goto} from "@/utils/common";
import {truncateDate} from "@/utils/common";

export default {
  components: {
    HxkCard
  },
  dicts: ['pay_state'],
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      billTypeMapping: {
        "1": "一次性服务费"
      }
    };
  },
  methods: {
    truncateDate,
    goto,
    handlePay(item) {
      console.log('handlePay', item);
      this.$tab.navigateTo('/pages/pay/index')
    }
  }
}
</script>

<style lang="scss">
.bill-list {
  padding: 20rpx;

  .bill-item {
    margin-bottom: 20rpx;

    .header {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 32rpx;
        color: #111;
      }

      .status {
        font-size: 24rpx;
        color: #f00;
      }
    }

    .body {
      .cycle,
      .addres {
        font-size: 28rpx;
        color: #666;
        margin-top: 20rpx;
      }

      .deadline-date {
        font-size: 28rpx;
        color: #666;
        margin-top: 20rpx;
      }

      .bill-amount {
        // 居右显示
        text-align: right;
        font-size: 28rpx;
        color: #666;
        margin-top: 20rpx;
      }
    }

    .footer {
      display: flex;
      // 居右显示
      justify-content: flex-end;


      .btn {
        padding: 10rpx 20rpx;
        font-size: 22rpx;
      }
    }

  }
}


</style>